<template>
  <div style="background-color: #F8F8F8;height: 100vh;padding-top: 150px">
    <div style="margin: 0px 100px 200px 100px;background-color: white;">
      <div class="text-center">
        <Avatar :img="user.avatar" size="large" :name="user.friendRemark"></Avatar>
      </div>
      <el-descriptions title="用户信息" class="description" :column="2">
        <el-descriptions-item label="姓名">{{ user.friendRemark }}</el-descriptions-item>
        <el-descriptions-item label="性别"
        >{{ user.sex === "0" ? "男" : "女" }}
        </el-descriptions-item>
        <el-descriptions-item label="电话"
        >{{ user.phonenumber }}
        </el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
      </el-descriptions>
      <el-button class="send-btn" @click="send()">发送消息</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserInfo",
  data() {
    return {
      user: {}
    }
  },
  created() {
    this.$EventBus.$on('changeFriend', (friend) => {
      this.user = friend;
    })
  }, methods: {}
}
</script>

<style scoped>
.description {
  padding: 20px;
  background-color: #ffffff;
}

.send-btn {
  float: right;
  margin-top: 15px;
}
</style>
